<template>
  <div>
    <!-- 搜索条件卡片 -->
    <el-card style="height: 60px" :body-style="{ padding: '10px',height:'10px' }">
      <div class="box-card-div">
        <el-form :inline="true" :model="baseSupplier" ref="ruleForm" class="demo-form-inline">
          <el-form-item label="供应商" prop="supplier">
            <el-input size="small" v-model="baseSupplier.supplier" placeholder="请输入供应商名称/编码"
                      style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input size="small" v-model="baseSupplier.contactPhone" placeholder="联系电话" style="width: 130px"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="baseSupplier.status" placeholder="请选择" style="width: 100px" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注查询" prop="remark">
            <el-input size="small" v-model="baseSupplier.remark" placeholder="关键词" style="width: 150px"></el-input>
          </el-form-item>
          <!-- 操作按钮 -->
          <el-form-item>
            <el-button type="success" round size="small" @click="onSearch" icon="el-icon-search">查询</el-button>
            <el-button type="warning" round size="small" @click="resetForm('ruleForm')" icon="el-icon-refresh-left">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 表格数据和分页栏卡片 -->
    <el-card style="height: 540px">
      <div>
        <el-button style="margin-bottom: 10px" size="mini" type="danger" @click="deleteBatch" icon="el-icon-delete">
          批量删除
        </el-button>
        <el-button style="margin-left: 20px;margin-bottom: 10px" size="mini" type="primary"
                   @click="handleAdd" icon="el-icon-plus"
        >添加数据
        </el-button>
      </div>
      <!-- 表格数据 -->
      <el-table :data="tableData" stripe border @selection-change="handleSelectionChange" height="400px"
                style="width: 100%"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <!-- 数据列 -->
        <el-table-column prop="supplierId" label="编码" width="50"></el-table-column>
        <el-table-column prop="supplierName" label="供应商名称" width="200"></el-table-column>
        <el-table-column prop="contactPhone" label="联系电话" width="130"></el-table-column>
        <el-table-column prop="contactPerson" label="联系人" width="100"></el-table-column>
        <el-table-column prop="email" label="邮箱地址" width="150"></el-table-column>
        <el-table-column prop="remark" label="备注" width="170"></el-table-column>
        <el-table-column prop="status" label="状态" width="60"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="160"></el-table-column>

        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="130">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="small">删除</el-button>
            <!-- 判断，如果当前状态为禁用，则显示启用按钮，反之显示禁用按钮 -->
            <el-button v-if="scope.row.status === '禁用'" @click="handleEnable(scope.$index, scope.row)" type="text"
                       size="small"
            >启用
            </el-button>
            <el-button v-else @click="handleForbid(scope.$index, scope.row)" type="text" size="small">禁用
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页栏 -->
      <div style="display: flex; align-items: center; margin-top: 22px; margin-left: 100px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="baseSupplier.pageNum"
          :page-sizes="[5,10,15,20,total]"
          :page-size="baseSupplier.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" size="small" @click="findAll">跳转</el-button>
      </div>

    </el-card>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="600px"
      @closed="resetFormDialog('editForm')"
    >
      <el-form
        ref="editForm"
        :model="dialogForm"
        :rules="rules"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="dialogForm.supplierName" placeholder="请输入供应商名称"/>
        </el-form-item>

        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="dialogForm.contactPerson" placeholder="请输入联系人"/>
        </el-form-item>

        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="dialogForm.contactPhone" placeholder="请输入联系电话"/>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dialogForm.email" placeholder="请输入邮箱地址"/>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dialogForm.status">
            <el-radio label="正常"/>
            <el-radio label="禁用"/>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="dialogForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>


<script>
import { deleteBatch, deleteOne, findAll, forbid, enable, save, update } from '@/api/base/baseSupplier'

export default {
  name: 'baseSupplier',
  data() {

    // 表单验证规则
    const validatePhone = (rule, value, callback) => {
      if (!/^[\d-]+$/.test(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }

    return {
      // 新增弹窗相关数据
      dialogFormVisible: false,
      dialogTitle: '新增供应商',
      dialogForm: {
        supplierId: null,
        supplierName: '',
        contactPerson: '',
        contactPhone: '',
        email: '',
        status: '正常',
        remark: '',
      },
      rules: {
        supplierName: [
          { required: true, message: '供应商名称不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
        ],
        contactPerson: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        email: [
          { required: true, type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },

      baseSupplier: {
        //搜索条件
        supplier: null,//供应商名称或者编码
        supplierName: null,
        supplierId: null,
        contactPhone: null,
        status: null,
        remark: null,
        //分页信息
        pageSize: 5,
        pageNum: 1,
        //多选---选择的行的id数组
        selectedIds: [],
      },//用于传递给后端传参
      total: 0,//分页---总条数
      tableData: [],//表格数据
      multipleSelection: [],//多选---选择的行的id数组
      options: [
        { value: null, label: '全部' },
        { value: '正常', label: '正常' },
        { value: '禁用', label: '禁用' }
      ]//状态下拉框选项
    }
  },
  methods: {
    findAll() {
      findAll(this.baseSupplier).then(ret => {
        this.tableData = ret.data.list
        this.total = ret.data.total
      })
    },//分页查询全部数据
    onSearch() {
      this.baseSupplier.pageNum = 1
      this.findAll()
    },//条件查询按钮调用
    handleSizeChange(val) {
      this.baseSupplier.pageSize = val
      this.findAll()//每当分页大小变化时，重新查询
    },//分页大小变化
    handleCurrentChange(val) {
      this.baseSupplier.pageNum = val
      this.findAll()//每当分页页码变化时，重新查询
    },//分页页码变化
    handleDelete(index, row) {
      //弹出确认框
      this.$confirm('确认删除该用户吗？', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        //调用后端删除接口
        this.baseSupplier.supplierId = row.supplierId
        deleteOne(this.baseSupplier).then(ret => {
          this.$message.success('删除成功')
          this.baseSupplier.pageNum = 1
          this.findAll()
        })
      }).catch(() => {
      })
    },//单个删除
    handleSelectionChange(val) {
      this.multipleSelection = val.map(baseSupplier => baseSupplier.supplierId)
    },//多选处理---用于批量删除操作
    deleteBatch() {
      //弹出确认框
      this.$confirm('确认删除这些用户吗？', '提示', {
        type: 'warning'
      }).then(() => {
        //调用后端删除接口
        //注意：后端接口需要接收一个ids参数，值为选择的行的id数组，用逗号分隔
        this.baseSupplier.selectedIds = this.multipleSelection.join(',')
        deleteBatch(this.baseSupplier).then(ret => {
          this.$message.success('删除成功')
          this.baseSupplier.pageNum = 1
          this.findAll()
        })
      }).catch(() => {
      })
    },//多选删除---批量删除按钮调用
    resetForm(formName) {
      this.$refs[formName].resetFields()//抄的官方文档的写法，通过ref获取表单实例，调用resetFields方法重置表单
      this.baseSupplier.supplier = null
      this.baseSupplier.contactPhone = null
      this.baseSupplier.status = null
      this.baseSupplier.remark = null
      this.baseSupplier.pageNum = 1
      this.findAll()
    },//重置搜索条件按钮调用
    handleForbid(index, row) {
      this.baseSupplier.supplierId = row.supplierId
      forbid(this.baseSupplier).then(ret => {
        this.$message.success('禁用成功')
        this.baseSupplier.pageNum = 1
        this.findAll()
      })
    },//禁用按钮调用
    handleEnable(index, row) {
      this.baseSupplier.supplierId = row.supplierId
      enable(this.baseSupplier).then(ret => {
        this.$message.success('启用成功')
        this.baseSupplier.pageNum = 1
        this.findAll()
      })
    },//启用按钮调用

    // 新增按钮
    handleAdd() {
      this.dialogTitle = '新增供应商'
      this.dialogForm = {
        supplierName: '',
        contactPerson: '',
        contactPhone: '',
        email: '',
        status: '正常',
        remark: ''
      }
      this.dialogFormVisible = true
    },

    // 编辑按钮
    handleEdit(index, row) {
      this.dialogTitle = '编辑供应商'
      // 深拷贝数据避免污染原数据
      this.dialogForm = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },

    // 提交表单
    submitForm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          const api = this.dialogTitle === '编辑供应商' ? update : save
          api(this.dialogForm).then(() => {
            this.$message.success(this.dialogTitle === '编辑供应商' ? '修改成功' : '新增成功')
            this.dialogFormVisible = false
            this.findAll()
          })
        } else {
          this.$message.warning('请完善表单信息')
          return false
        }
      })
    },

    // 重置表单
    resetFormDialog(formName) {
      this.$refs[formName]?.resetFields()
    }
  },

  created() {
    this.findAll()
  }//钩子函数---在组件创建完成后，立即查询一次数据
}
</script>
<style scoped>
/* 调整弹窗表单样式 */
.dialog-footer {
  text-align: right;
  padding: 20px 20px 0;
}
</style>


